import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
  TeamOutlined,
  HomeOutlined,
  UserOutlined,
  BarChartOutlined,
  ShoppingOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import { getStorage } from '../utils/storage';

const { SubMenu } = Menu;

class TheSideBar extends Component {
  state = {
    menus: [],
    menuItemsData: [
      {
        key: '/home',
        title: '首页',
        icon: <HomeOutlined />,
      },
      {
        key: '/users',
        title: '用户管理',
        icon: <UserOutlined />,
      },
      {
        key: '/roles',
        title: '角色管理',
        icon: <TeamOutlined />,
      },
      {
        key: '/products',
        title: '商品管理',
        icon: <ShoppingOutlined />,
        children: [
          {
            key: '/products/categories',
            title: '品种管理',
          },
          {
            key: '/products/products-list',
            title: '商品列表',
          },
        ],
      },
      {
        key: '/finances',
        title: '财务管理',
        icon: <BarChartOutlined />,
        children: [
          {
            key: '/finances/transaction',
            title: '交易流水',
          },
          {
            key: '/finances/sales-performance',
            title: '销售业绩',
          },
        ],
      },
    ],
    getData: false,
  };

  componentDidMount() {
    const currentUser = getStorage('userInfo');
    // console.log(currentUser);
    this.setState({
      menus: currentUser.role.menus,
      getData: true,
    });
  }

  render() {
    const { menus, menuItemsData, getData } = this.state;
    return (
      <Menu
        theme="dark"
        defaultSelectedKeys={[this.props.history.location.pathname]}
        mode="inline"
      >
        {true
          ? menus.map(item => {
              console.log(item);
              const menuItem = menuItemsData.find(m => item.includes(m['key']));
              console.log(menuItem);
              if (menuItem.children) {
                return (
                  <SubMenu
                    key={menuItem.key}
                    icon={menuItem.icon}
                    title={menuItem.title}
                  >
                    {menuItem['children'].map(item => (
                      <Menu.Item key={item.key}>
                        <Link to={item.key}>{item.title}</Link>
                      </Menu.Item>
                    ))}
                  </SubMenu>
                );
              }
              return (
                <Menu.Item key={menuItem.key} icon={menuItem.icon}>
                  <Link to={menuItem.key}>{menuItem.title}</Link>
                </Menu.Item>
              );
            })
          : 'Loading'}
        {/* <Menu.Item key="/home" icon={<HomeOutlined />}>
          <Link to="/home">首页</Link>
        </Menu.Item>
        <Menu.Item key="/users" icon={<UserOutlined />}>
          <Link to="/users">用户管理</Link>
        </Menu.Item>
        <Menu.Item key="/roles" icon={<TeamOutlined />}>
          <Link to="/roles">角色管理</Link>
        </Menu.Item>
        <SubMenu key="sub1" icon={<ShoppingOutlined />} title="商品管理">
          <Menu.Item key="/products/categories">
            <Link to="/products/categories">品种管理</Link>
          </Menu.Item>
          <Menu.Item key="/products/products-list">
            <Link to="/products/products-list">商品列表</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<BarChartOutlined />} title="财务管理">
          <Menu.Item key="/finances/transaction">
            <Link to="/finances/transaction">交易流水</Link>
          </Menu.Item>
          <Menu.Item key="/finances/sales-performance">
            <Link to="/finances/sales-performance">销售业绩</Link>
          </Menu.Item>
        </SubMenu> */}
      </Menu>
    );
  }
}

export default withRouter(TheSideBar);
